<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 600px;
            height: 600px;
            background: url("./img/clock.jpg") no-repeat;
            margin: 20px auto;

            position: relative;
        }
        #hour,#min,#second{
            position: absolute;
            left: 50%;
            top: 0;
            margin-left: -15px;
            width: 30px;
            height: 600px;
        }
        #hour{
            background: url("./img/hour.png") no-repeat;
        }
        #min{
            background: url("./img/minute.png") no-repeat;
        }
        #second{
            background: url("./img/second.png") no-repeat;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="hour"></div>
        <div id="min"></div>
        <div id="second"></div>
    </div>

    <script>
        window.addEventListener('load',function(){
            
            setInterval(function(){
                //1、获取当前时间
                let date = new Date();

                //2、转换为时分秒
                let mills = date.getMilliseconds();
                let s = date.getSeconds() + mills / 1000;
                let m = date.getMinutes() + s/60;
                let h = date.getHours() + m/60;

                //3、旋转
                $('hour').style.transform = `rotate(${h*30}deg)`
                $('min').style.transform = `rotate(${m*6}deg)`
                $('second').style.transform = `rotate(${s*6}deg)`
            },10);//可以减小或者减低定时器的刷新频率
        });
        function $(id){
            return typeof id === 'string' ? document.getElementById(id) : null; 
        }
    </script>
</body>
</html>